<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- echarts的容器，高度是必写的, 宽度可选 -->
    <div id="main" style="height: 400px"></div>

    <script src="../libs/echarts-5.3.3.js"></script>
    <script src="./geojson/china_json.js"></script>
    <script>
      window.onload = function () {
        echarts.registerMap('中国', { geoJSON: china_json })
        var myChart = echarts.init(document.getElementById('main'))

        var mapName = '中国'
        var data = [
          { name: '北京', value: 199 },
          { name: '天津', value: 42 },
          { name: '河北', value: 102 },
          { name: '山西', value: 81 },
          { name: '内蒙古', value: 47 },
          { name: '辽宁', value: 67 },
          { name: '吉林', value: 82 },
          { name: '黑龙江', value: 123 },
          { name: '上海', value: 154 },
          { name: '江苏', value: 102 },
          { name: '浙江', value: 114 },
          { name: '安徽', value: 109 },
          { name: '福建', value: 116 },
          { name: '江西', value: 91 },
          { name: '山东', value: 119 },
          { name: '河南', value: 137 },
          { name: '湖北', value: 116 },
          { name: '湖南', value: 114 },
          { name: '重庆', value: 101 },
          { name: '四川', value: 125 },
          { name: '贵州', value: 62 },
          { name: '云南', value: 83 },
          { name: '西藏', value: 9 },
          { name: '陕西', value: 80 },
          { name: '甘肃', value: 56 },
          { name: '青海', value: 10 },
          { name: '宁夏', value: 18 },
          { name: '新疆', value: 120 },
          { name: '广东', value: 193 },
          { name: '广西', value: 59 },
          { name: '海南', value: 14 },
        ]

        var geoCoordMap = {}
        /*获取地图数据*/
        myChart.showLoading()
        var mapFeatures = echarts.getMap(mapName).geoJson.features
        mapFeatures.forEach(function (v) {
          // 地区名称
          var name = v.properties.name
          // 地区经纬度
          geoCoordMap[name] = v.properties.cp
        })
        myChart.hideLoading()
        console.log('data=>', data)
        console.log('geoCoordMap=>', geoCoordMap)

        var convertData = function (data) {
          var res = []
          for (var i = 0; i < data.length; i++) {
            var geoCoord = geoCoordMap[data[i].name]
            if (geoCoord) {
              res.push({
                name: data[i].name,
                value: [...geoCoord, data[i].value],
              })
            }
          }
          console.log('res=>', res)
          return res
        }

        // 2.指定图表的配置项和数据
        var option = {
          tooltip: {},
          visualMap: {
            left: '20%',
            seriesIndex: [0],
            inRange: {
              color: ['#04387b', '#467bc0'], // 蓝绿
            },
          },
          geo: {
            map: '中国',
            roam: false,
            label: { show: false },
            aspectScale: 0.75,
            itemStyle: {
              areaColor: '#023677',
              borderColor: '#1180c7',
            },
            emphasis: {
              itemStyle: { areaColor: '#4499d0' },
              label: { color: 'white' },
            },
          },
          series: [
            {
              name: '中国地图',
              type: 'map',
              map: '中国',
              data,
              // 地图样式
              itemStyle: {
                areaColor: '#023677',
                borderColor: '#1180c7',
              },
              emphasis: {
                itemStyle: { areaColor: '#4499d0' },
                label: { color: 'white' },
              },
              select: {
                label: { color: 'white' },
                itemStyle: { areaColor: '#4499d0' },
              },
            },

            {
              name: '散点图充电桩',
              type: 'effectScatter',
              geoIndex: 0,
              coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
              data: convertData(data),
              symbolSize: function (val) {
                return val[2] / 10
              },
              itemStyle: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow',
              },
              tooltip: {
                show: true,
                trigger: 'item',
                formatter: function (params) {
                  console.log(params, 'abcd')
                  var data = params.data
                  return `${params.seriesName} <div style="margin:5px 0px;"/> ${data.name} ${data.value[2]}`
                },
              },
            },
          ],
        }

        myChart.setOption(option)
      }
    </script>
  </body>
</html>
